<template>
    <StudentForm :student="student" @submit="handleSubmit"/>
</template>

<script setup>
import StudentForm from '../components/StudentFrom.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMemberStore } from '../stores/member'

const memberStore =  useMemberStore()
const route = useRoute()
const router = useRouter()

const student = ref({
    id:null,
    grades:{
        frontend:null,
        english:null,
        python:null
    }
})

onMounted(() => {
    const s = memberStore.getUserById(Number(route.params.id))
    if(s) {
        student.value.id = s.id
        student.value.grades = {...s.grades}
    }
})
const handleSubmit = () => {
    memberStore.updateStudentGrades(student.value.id, student.value.grades)
    router.push('/students')
}
</script>